<template>
	<view>
		<NavBar title="房间详情" :isScroll="!showNav" :placeholder="false" />
		<u-swiper indicatorMode="dot" indicator indicatorStyle="right:20rpx;bottom:75rpx !important" height="535rpx" keyName="src" :list="imgList"></u-swiper>
		<view class="room-box">
			<view class="room-top">
				<view class="houseName">长沙岳麓区人人乐23店/超大游泳池</view>
				<view class="facility-style zdy-flex zdy-flex-between">
					<text>2023年开业︱5种房型︱国风</text>
					<span>
						<span>设施/详情</span>
						<u-icon size="12" name="arrow-right" bold></u-icon>
					</span>
				</view>
				<view class="" style="margin-bottom: 15rpx">
					<span class="tags-item" v-for="item in 3" :key="item">近地铁</span>
				</view>
				<view class="room-top-bottom">
					<view class="zdy-flex zdy-flex-between zdy-flex-align-center">
						<view class="">
							<view class="houseName">长沙市岳麓区新建西路126号</view>
							<view class="distance">距离中南大学地铁站约752m</view>
						</view>
						<image style="width: 48rpx; height: 48rpx" src="/static/img/housing/ditu.png" mode=""></image>
					</view>
					<view class="coupon zdy-flex zdy-flex-between" @click="$tn('/activity/coupon')">
						<image src="/static/img/housing/xyh.png" style="width: 205rpx; height: 32rpx" mode=""></image>
						<view class="">
							<span>领券</span>
							<u-icon size="12" color="#FD5454" name="arrow-right" bold></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="room-item-box">
				<view class="room-item-top zdy-flex zdy-flex-align-center" @click="dateShow = true">
					<span>{{ weekShow.startDay }}</span>
					<text>{{ weekShow.startWeek }}入住</text>
					<span style="margin-left: 40rpx">{{ weekShow.endDay }}</span>
					<text>{{ weekShow.endWeek }}离店</text>
					<span style="margin-left: auto" class="zdy-flex zdy-flex-align-center">
						<span style="font-size: 24rpx">共{{ weekShow.totalDay }}晚</span>
						<u-icon size="12" name="arrow-right" bold></u-icon>
					</span>
				</view>
				<view class="" style="margin-bottom: 30rpx">
					<span class="tags-item" v-for="item in 3" :key="item">近地铁</span>
				</view>
				<view @click="goReserveOrder()" class="room-item zdy-flex" v-for="item in 3" :key="item">
					<u--image radius="12rpx" :showLoading="true" src="/static/img/home/shenghuo.png" width="175rpx" height="210rpx"></u--image>
					<view class="room-item-right zdy-flex zdy-flex-direction">
						<view class="room-name">标准大床房</view>
						<view class="">大床︱2人入住︱有窗户︱不含早餐</view>
						<view class="">入住当天18:00前可免费取消</view>
						<view class="rights zdy-flex zdy-flex-align-center">
							<view>会员权益</view>
							<view>赠800积分</view>
						</view>
						<view class="room-price">
							￥
							<span>800</span>
							<text>￥1280</text>
						</view>
						<view class="reserve">
							<view class="reserve-top">订</view>
							<view class="reserve-bottom">在线订</view>
						</view>
					</view>
				</view>
			</view>
			<view class="facility-policy">
				<view class="facility-policy-title">设施与政策</view>
				<view class="facility-box zdy-flex zdy-flex-wrap">
					<view class="facility-item" v-for="item in 9" :key="item">
						<image style="width: 48rpx; height: 48rpx" src="/static/img/housing/wz.png" mode=""></image>
						<view class="">停车场</view>
					</view>
					<view class="facility-last zdy-flex zdy-flex-direction zdy-flex-between zdy-flex-align-center">
						<view class="facility-count">12</view>
						<view class="">全部设施</view>
					</view>
				</view>
				<view class="restrict">入住限制</view>
				<view class="restrict restrict-describe">仅接待大陆和港澳台宾客</view>
				<view class="restrict">年龄限制</view>
				<view class="restrict restrict-describe">入住办理人需年满18岁</view>
			</view>
		</view>
		<u-calendar
			:defaultDate="[params.startDate, params.endDate]"
			closeOnClickOverlay
			@close="dateShow = false"
			color="#85DCD6"
			:show="dateShow"
			mode="range"
			@confirm="confirmDate"
		></u-calendar>
	</view>
</template>

<script>
import disposeDate from '@/mixins/disposeDate.js';
import { getRoomDetails } from '@/api/house.js';
export default {
	mixins: [disposeDate],
	data() {
		return {
			showNav: true, //隐藏导航栏背景
			params: {},
			imgList: [
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' }
			]
		};
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	onLoad(params) {
		this.params = JSON.parse(params.params);
		this.getDetails();
	},
	onShow() {},
	methods: {
		goReserveOrder() {
			const { startDate, endDate, roomId } = this.params;
			this.$tn('/housing/reserveOrder?params=' + JSON.stringify({ startDate, endDate, roomId }));
		},
		getDetails() {
			getRoomDetails(this.params.roomId).then((res) => {
				console.log(res, '8888888888');
			});
		}
	}
};
</script>
<style>
page {
	background-color: #e6f8f7;
}
</style>

<style scoped lang="scss">
.room-box {
	position: relative;
	margin-top: -50rpx;
	padding-bottom: 50rpx;
	.tags-item {
		width: fit-content;
		margin-right: 8rpx;
		padding: 4rpx 10rpx;
		background: #dff6f4;
		border-radius: 4rpx;
		font-weight: 500;
		font-size: 20rpx;
		color: #149e99;
	}
	.room-top {
		border-radius: 40rpx 40rpx 16rpx 16rpx;
		background-color: #ffffff;
		padding: 40rpx 25rpx;
		.houseName {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
		.facility-style {
			margin: 25rpx 0 15rpx;
			font-size: 24rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			span {
				font-weight: bold;
				color: #333333;
				span {
					margin-right: 15rpx;
				}
			}
		}
		.room-top-bottom {
			padding-top: 25rpx;
			border-top: 1px solid #eeeeee;
			.houseName {
				font-weight: 500;
				font-size: 28rpx;
			}
			.distance {
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
			}
			.coupon {
				margin-top: 20rpx;
				span {
					margin-right: 16rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #fd5454;
				}
			}
		}
	}
	.room-item-box {
		margin-bottom: 15rpx;
		margin-top: 15rpx;
		padding: 30rpx 25rpx;
		color: #333333;
		background: #ffffff;
		border-radius: 16rpx;
		.room-item-top {
			margin-bottom: 25rpx;
			span {
				margin-right: 8rpx;
				font-weight: bold;
				font-size: 34rpx;
			}
			text {
				font-weight: 500;
				font-size: 24rpx;
			}
		}
		.tags-item {
			margin-right: 15rpx;
			padding: 8rpx 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			background-color: #f4f5f7;
			color: #333333;
		}
		.room-item {
			margin-bottom: 25rpx;
			.room-item-right {
				width: 100%;
				position: relative;
				padding-top: 10rpx;
				min-height: 230rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #eeeeee;
				margin-left: 25rpx;
				color: #333333;
				.room-name {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
				}
				.rights {
					margin: 15rpx 0;
					& > view:first-child {
						font-size: 20rpx;
						padding: 7rpx 10rpx;
						background: #f9dfc1;
						border-radius: 4rpx 0rpx 0rpx 4rpx;
					}
					& > view:last-child {
						padding: 6rpx 12rpx;
						background: #fcf5ed;
						font-size: 18rpx;
					}
				}
				view {
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
				}
				.room-price {
					margin-top: auto;
					font-weight: bold;
					font-size: 24rpx;
					color: #ff3a3a;
					span {
						margin-right: 8rpx;
						font-family: DIN;
						font-weight: bold;
						font-size: 32rpx;
					}
					text {
						font-weight: 500;
						color: #999999;
						text-decoration-line: line-through;
					}
				}
				.reserve {
					text-align: center;
					position: absolute;
					border: 2rpx solid #fd5454;
					right: 30rpx;
					bottom: 25rpx;
					width: 72rpx;
					height: 88rpx;
					border-radius: 8rpx;
					.reserve-top {
						line-height: 52rpx;
						height: 52rpx;
						color: #ffffff;
						background: #fd5454;
					}
					.reserve-bottom {
						color: #fd5454;
						line-height: 36rpx;
						font-weight: 500;
						font-size: 20rpx;
					}
				}
			}
		}
		.room-item:last-of-type {
			margin-bottom: 0;
		}
		.room-item:last-of-type {
			.room-item-right {
				border-bottom: none;
			}
		}
	}
	.facility-policy {
		padding: 30rpx 25rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.facility-policy-title {
			margin-bottom: 55rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
		}
		.facility-item,
		.facility-last {
			margin-bottom: 35rpx;
			font-size: 22rpx;
			text-align: center;
			width: 20%;
		}
		.facility-last {
			font-weight: bold;
			font-size: 22rpx;
			color: #149e99;
			.facility-count {
				width: 48rpx;
				height: 48rpx;
				font-size: 30rpx;
			}
		}
		.restrict {
			margin-bottom: 25rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
		}
		.restrict-describe {
			font-weight: 500;
			font-size: 22rpx;
		}
	}
}
</style>
